<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="status_bar" :style="'height:'+tophight.top+'px;'"></view>
		<view class="status_title" :style="'height:'+tophight.height+'px;'">
			<view @click="onBack()">
				<image class="back-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/99510d9b-3884-4562-8fe4-4c0f4f40cad5.png"></image>
			</view>
			<text>体质报告</text>
		</view>
		<!-- #endif -->
		<view class="header">
			<view class="user-view">
				<view class="avatar">
					<u-image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a4404efd-7f45-450c-823e-06719c449c57.png" shape="circle"></u-image>
				</view>
				<view class="user-info">
					<view class="name">{{userdata.nickName || ''}}</view>
					<view class="date">{{detail.createTime || ''}}</view>
				</view>
			</view>
		</view>
		<view class="banner-view">
			<image class="banner-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/4971d9a9-6230-44a5-889f-f88536b99139.png"></image>
			<view class="content-view">
				<view class="content-head">
					<view class="head-title">您的体质偏向性</view>
					<view class="head-dec">
						<text class="label">{{detail.title || ''}}</text>
						<text class="value">易烦热浮躁</text>
					</view>
					<view class="head-body">
						<view class="head-body-image">
							<image class="head-body-image-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/cd82560b-8dee-4aa3-ada1-e323b02816f3.png"></image>
						</view>
						<view class="head-body-list">
							<view class="head-body-list-item1">
								<text>夏天怕热</text>
								<image class="item-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/6640f1f1-fe89-4799-8f51-9373e76c358d.png" mode=""></image>
							</view>
							<view class="head-body-list-item2">
								<text>冬天怕冷</text>
								<image class="item-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/6640f1f1-fe89-4799-8f51-9373e76c358d.png" mode=""></image>
							</view>
							<view class="head-body-list-item3">
								<text>免疫力低下</text>
								<image class="item-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/cdc3f9ed-d39a-463b-9566-869ad9a2b737.png" mode=""></image>
							</view>
							<view class="head-body-list-item4">
								<image class="item-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/ecdae1b2-05b9-432d-9fec-76dcc2c6618f.png" mode=""></image>
								<text>腰膝酸软</text>
							</view>
							<view class="head-body-list-item5">
								<image class="item-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/f704d9a5-032c-4079-82ee-2ab2b5633ddb.png" mode=""></image>
								<text>口干舌燥</text>
							</view>
							<view class="head-body-list-item6">
								<image class="item-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/cc1b0d75-2caa-4bb1-874b-9d63a21ded4c.png" mode=""></image>
								<text>容易腹泻</text>
							</view>
						</view>
						
					</view>
					
				</view>
				<!-- tab -->
				<view class="tab-wrap">
					<image v-if="isShow" class="tab-bg1" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/58632154-ae65-4716-aa37-84da9393b2e2.png" @click="handleTab('tab-bg1')"></image>
					<image v-if="!isShow" class="tab-bg3" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/f6eee56e-abd7-4ada-baa4-d3c63d15e680.png" @click="handleTab('tab-bg3')"></image>
					<image v-if="!isShow" class="tab-bg2" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/881efc8e-7814-4fc6-8a6e-9913cbe5f7dd.png" @click="handleTab('tab-bg2')"></image>
					<image v-if="isShow" class="tab-bg4" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/cc140179-dbca-431e-b9dc-e2e02141011b.png" @click="handleTab('tab-bg4')"></image>
				</view>
				<!-- 展示区 -->
				<view class="substance">
					<!-- 体质详情 -->
					<view class="substance-detail" v-if="isShow">
						<!-- 滚动区 -->
						<scroll-view scroll-y scroll-with-animation style="height: 640rpx;">
							<view class="define-detail">
								<text style="font-weight: 500;color: #140F08">【定义】</text>{{detail.definition || ''}}
							</view>
							<view class="origin-detail">
								<text style="font-weight: 500;color: #140F08">【成因】</text>{{detail.caution || ''}}
							</view>
							<view class="common-detail">
								<text style="font-weight: 500;color: #140F08">【常见不适】</text>{{detail.discomfort || ''}}
							</view>
						</scroll-view>
						<view class="tip">注：报告仅供参考，具体情况以医生建议为准.</view>
					</view>
					<!-- 调理建议 -->
					<view class="substance-suggest" v-if="!isShow">
						<view class="tab-view">
							<u-tabs :list="list" lineColor="#ff702a" lineWidth="40" :inactiveStyle="{color:'#5B5E63'}" :activeStyle="{fontWeight: 'bold',color: '#32363C'}" @change="onTabChange"></u-tabs>
						</view>
						<!-- 滚动区 -->
						<scroll-view scroll-y scroll-with-animation :scroll-into-view="tracingLeftPoint" style="height: 520rpx;margin-bottom: 40rpx;">
							<!-- 饮食 -->
							<view class="suggest-item" id="section1">
								<view class="label">【饮食】</view>
								<view class="value">{{detail.food || ''}}</view>
							</view>
							<!-- 药膳 -->
							<view class="medicated-view" id="section2">
								<text class="label">【药膳】</text>
								<view class="medicated-list">
									<view class="medicated-item" v-for="(item,index) in detail.medicatedFoodList" :key="index">
										<view class="medicated-head">
											<view class="medicated-head-l">
												<text class="name">{{item.name || ''}}</text>
												<text class="dec">温中下气、健脾养胃</text>
											</view>
											<view class="medicated-head-r">
												<!-- <image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/05ebc364-8b39-4a5a-8ad3-d38289b854ea.png" mode=""></image> -->
											</view>
										</view>
										<view class="batching">
											配料：{{item.rawMaterial || ''}}
										</view>
										<view class="practice">
											做法：{{item.pratice || ''}}
										</view>
									</view>
								</view>
							</view>
							<!-- 运动 -->
							<view class="suggest-item" id="section3">
								<view class="label">【运动】</view>
								<view class="value">{{detail.sport || ''}}</view>
							</view>
							<!-- 情志 -->
							<view class="suggest-item" id="section4">
								<view class="label">【情志】</view>
								<view class="value">{{detail.emotionAdvice || ''}}</view>
							</view>
							<!-- 穴位 -->
							<view class="acupoint-item" id="section5">
								<text class="acupoint-l">【穴位】</text>
								<view class="acupoint-r">
									<text class="value">{{detail.acupoint || ''}}</text>
									<view class="acupoint-image">
										<view class="acupoint-image-item" v-for="(item,index) in detail.xueweiImages" :key="index">
											<image :src="item"></image>
										</view>
									</view>
								</view>
							</view>
							<!-- 经络 -->
							<view class="suggest-item" id="section6">
								<view class="label">【经络】</view>
								<view class="value">{{detail.advice || ''}}</view>
							</view>
							<!-- 习惯 -->
							<view class="suggest-item" id="section7">
								<view class="label">【习惯】</view>
								<view class="value">{{detail.dailyAdvice || ''}}</view>
							</view>
						</scroll-view>
						<view class="tip">注：报告仅供参考，具体情况以医生建议为准.</view>
					</view>
					
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	//引入请求文件
	import {listing} from '../../api/api.js'
	import {corporeityReport} from '../../api/request.js'
	export default{
		data(){
			return{
				tophight:{},
				isShow: true,
				list:[
					{name:'饮食'},
					{name:'药膳'},
					{name:'运动'},
					{name:'情志'},
					{name:'穴位'},
					{name:'经络'},
					{name:'习惯'},
				],
				detail:{},
				userdata:{},
				tracingLeftPoint:''
			}
		},
		onShow() {
			this.ifUser()
		},
		created() {
			// #ifdef MP-WEIXIN
			this.tophight = uni.getMenuButtonBoundingClientRect()
			// #endif
		},
		onLoad(e) {
			this.getDetail(e.id)
		},
		methods:{
			onBack(){
				uni.navigateBack(-1)
			},
			ifUser(){
				let user = uni.getStorageSync('user')
				if(!user) return
				this.userdata=JSON.parse(user)
			},
			onTabChange(e){
				if(e.index == 0){
					this.tracingLeftPoint = 'section1'
				}
				if(e.index == 1){
					this.tracingLeftPoint = 'section2'
				}
				if(e.index == 2){
					this.tracingLeftPoint = 'section3'
				}
				if(e.index == 3){
					this.tracingLeftPoint = 'section4'
				}
				if(e.index == 4){
					this.tracingLeftPoint = 'section5'
				}
				if(e.index == 5){
					this.tracingLeftPoint = 'section6'
				}
				if(e.index == 6){
					this.tracingLeftPoint = 'section7'
				}
			},
			//获取报告详情
			getDetail(id){
				listing(corporeityReport+`?reportId=${id}`)
				.then(res=>{
					if(res.data.code === 200){
						this.detail = res.data?.data
						
					}
				})
			},
			handleTab(e){
				if(e == 'tab-bg1') this.isShow = true
				if(e == 'tab-bg2') this.isShow = false
				if(e == 'tab-bg3') this.isShow = true
				if(e == 'tab-bg4') this.isShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/16fadf3b-2bad-4eb5-8b5f-a7bd0d402c08.png');
		background-size: contain;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		.status_title{
			position: relative;
			display: flex;
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
			text{
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			.back-image{
				position: absolute;
				top: 0;
				left: 34rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}
		.header{
			display: flex;
			justify-content: space-between;
			padding: 30rpx 34rpx 0;
			box-sizing: border-box;
			.user-view{
				display: flex;
				align-items: center;
				.avatar{
					margin-right: 16rpx;
					/deep/.u-image{
						width: 90rpx !important;
						height: 90rpx !important;
					}
					/deep/.u-image__image{
						width: 90rpx !important;
						height: 90rpx !important;
					}
					/deep/.u-image__error{
						width: 90rpx !important;
						height: 90rpx !important;
					}
				}
				.user-info{
					font-weight: 400;
					.name{
						font-size: 36rpx;
						color: #140F08;
						padding-bottom: 6rpx;
					}
					.date{
						font-size: 24rpx;
						color: #140F08B3;
					}
				}
			}
		}
		.banner-view{
			position: relative;
			width: 100%;
			// height: auto;
			margin-top: 30rpx;
			margin-bottom: 60rpx;
			box-sizing: border-box;
			.banner-bg{
				width: 100%;
				height: 1680rpx;
				margin-bottom: 60rpx;
				box-sizing: border-box;
			}
			.content-view{
				position: absolute;
				top: 80rpx;
				left: 50%;
				transform: translateX(-50%);
				.content-head{
					font-weight: 400;
					.head-title{
						text-align: center;
						color: #140F08;
						font-size: 36rpx;
					}
					.head-dec{
						width: 640rpx;
						height: 168rpx;
						margin-top: 20rpx;
						background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/03fe3df4-ffcb-4b15-bded-121ee30a44cb.png');
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						.label{
							font-size: 40rpx;
							color: #AD4B3C;
							font-weight: bold;
							width: 100%;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.value{
							font-size: 24rpx;
							color: #AD4B3C;
							padding-top: 20rpx;
							width: 100%;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.head-body{
						position: relative;
						height: 462rpx;
						margin-top: 30rpx;
						&-image{
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							&-bg{
								width: 200rpx;
							}
						}
						&-list{
							font-size: 24rpx;
							&-item1{
								position: absolute;
								top: 60rpx;
								left: 36rpx;
								display: flex;
								align-items: center;
								text{
									padding-right: 16rpx;
								}
								.item-icon{
									width: 80rpx;
									height: 80rpx;
								}
							}
							&-item2{
								position: absolute;
								top: 182rpx;
								left: 36rpx;
								display: flex;
								align-items: center;
								text{
									padding-right: 16rpx;
								}
								.item-icon{
									width: 80rpx;
									height: 80rpx;
								}
							}
							&-item3{
								position: absolute;
								bottom: 76rpx;
								left: 14rpx;
								display: flex;
								align-items: center;
								text{
									padding-right: 16rpx;
								}
								.item-icon{
									width: 80rpx;
									height: 80rpx;
								}
							}
							&-item4{
								position: absolute;
								top: 60rpx;
								right: 36rpx;
								display: flex;
								align-items: center;
								text{
									padding-left: 16rpx;
								}
								.item-icon{
									width: 80rpx;
									height: 80rpx;
								}
							}
							&-item5{
								position: absolute;
                                top: 182rpx;
								right: 36rpx;
								display: flex;
								align-items: center;
								text{
									padding-left: 16rpx;
								}
								.item-icon{
									width: 80rpx;
									height: 80rpx;
								}
							}
							&-item6{
								position: absolute;
								bottom: 76rpx;
								right: 36rpx;
								display: flex;
								align-items: center;
								text{
									padding-left: 16rpx;
								}
								.item-icon{
									width: 80rpx;
									height: 80rpx;
								}
							}
						}
					}
				}
			}
		}
		.tab-wrap{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			.tab-bg1{
				width: 292rpx;
				height: 64rpx;
			}
			.tab-bg2{
				width: 292rpx;
				height: 64rpx;
			}
			.tab-bg3{
				width: 292rpx;
				height: 64rpx;
			}
			.tab-bg4{
				width: 292rpx;
				height: 64rpx;
			}
		}
		.substance{
			&-detail{
				font-size: 28rpx;
				font-weight: 400;
				color: #140F08B3;
				.define-detail{
				    white-space: pre-line;
					line-height: 44rpx;
					margin-bottom: 40rpx;
				}
				.origin-detail{
					white-space: pre-line;
					line-height: 44rpx;
					margin-bottom: 40rpx;
				}
				.common-detail{
					white-space: pre-line;
					line-height: 44rpx;
				}
				.tip{
					font-size: 20rpx;
					color: #140F0880;
					font-weight: 400;
					text-align: center;
					margin-top: 40rpx;
				}
			}
			&-suggest{
				.tab-view{
					margin-bottom: 40rpx;
				}
				.medicated-view{
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 40rpx;
					margin-top: 60rpx;
					box-sizing: border-box;
					.label{
						width: 112rpx;
						font-weight: 500;
						color: #140F08;
					}
					.medicated-list{
						flex: 1;
						.medicated-item{
							margin-bottom: 60rpx;
							.medicated-head{
								position: relative;
								display: flex;
								justify-content: space-between;
								margin-bottom: 40rpx;
								// align-items: center;
								&-l{
									display: flex;
									flex-direction: column;
									.name{
										font-weight: 500;
										color: #140F08;
										margin-bottom: 10rpx;
										
									}
									.dec{
										font-size: 24rpx;
										color: #AD4B3C;
									}
								}
								&-r{
									position: absolute;
									right: 0;
									bottom: -40rpx;
									image{
										width: 160rpx;
										height: 160rpx;
									}
								}
							}
							.batching{
								flex: 1;
								color: #140F08B3;
								white-space: pre-line;
								margin-bottom: 20rpx;
							}
							.practice{
								flex: 1;
								color: #140F08B3;
								white-space: pre-line;
							}
							&:last-child{
								margin-bottom: 16rpx;
							}
						}
					}
				}
				.acupoint-item{
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					.acupoint-l{
						width: 112rpx;
						font-weight: 500;
						color: #140F08;
					}
					.acupoint-r{
						flex: 1;
						.value{
							flex: 1;
							color: #140F08B3;
							white-space: pre-line;
						}
						.acupoint-image{
							display: flex;
							flex-wrap: wrap;
							margin-top: 20rpx;
							&-item{
								width: 48%;
								height: 128rpx;
								margin: 0 20rpx 20rpx 0;
								image{
									width: 100%;
									height: 100%;
								}
								&:nth-child(2n){
									margin-right: 0;
								}
							}
						}
					}
				}
				.suggest-item{
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 40rpx;
					box-sizing: border-box;
					.label{
						width: 112rpx;
						font-weight: 500;
						color: #140F08;
					}
					.value{
						flex: 1;
						color: #140F08B3;
						white-space: pre-line;
						
					}
					.medicated-view{
						.medicated-food{
							.medicated-head{
								display: flex;
								align-items: center;
								color: #140F08B3;
								.head-l{
									display: flex;
									flex-direction: column;
									.name{
										font-weight: 500;
										color: #140F08;
										white-space: pre-line;
									}
									.dec{
										font-size: 24rpx;
										color: #AD4B3C;
										white-space: pre-line;
									}
								}
								.head-r{
									image{
										width: 160rpx;
										height: 160rpx;
									}
								}
							}
							.batching{
								white-space: pre-line;
							}
							.practice{
								white-space: pre-line;
							}
						}
					}
				}
				.tip{
					font-size: 20rpx;
					color: #140F0880;
					font-weight: 400;
					text-align: center;
				}
			}
		}
	}
</style>